<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/common/mytaglibs.jsp"%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>合同详情</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="<%=basePath%>css/hetongList.css">
<link rel="stylesheet" href="<%=basePath%>/js/bootstrap-3.3.5-dist/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="./js/layui-v2.4.3/layui/css/layui.css"  media="all">
<script type="text/javascript" src="./js/layui-v2.4.3/layui/layui.all.js"></script>
<script src="<%=basePath%>/js/bootstrap-3.3.5-dist/js/bootstrap-datetimepicker.js"></script>
<script src="<%=basePath%>/js/bootstrap-3.3.5-dist/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<style>
.content{
	padding: 10px;
	color:rgb(51, 51, 51);
	font-size: 14px !important;
}

.content span{
	text-align: left;
	color:rgb(51, 51, 51) !important;

}

.content p{
	text-align: left;
	color:rgb(51, 51, 51) !important;

}

</style>
</head>
<script>
     var path = "<%=path%>";
     var nonce="";//生成签名的随机串
     var signature="";//签名
     var timestamp="";//时间戳
     var title="蓝居--定制租住生活";
     var desc="房屋出租托管、租房、除甲醛除异味、保洁家修戳我！";
     var sharLink="http://lanjushiye.com.cn/LanJuPublic/jsp/home.html";
     var imgUrl="http://lanjushiye.com.cn/LanJuPublic/images/lanju.jpg";
     var basePath="<%=basePath%>";
     $(document).ready(function(){  
   	  var url = encodeURI(location.href.split('#')[0]);
   	  $.ajax({
   	         url: basePath+"/weixinImpl/getEncryptJsapiTicket.spring?rn="+(new Date().getTime()),
   	         type: "POST",
   	         data:{"url":url},
   	         dataType: "json",
   	         success: function(data){
   	        	 if(data != null){
   	        		 nonce=data.nonce;
   		             signature=data.signature;
   		             timestamp=data.timestamp;
   		             loadWx();
   	        	 }
   	             
   	          },
   	          error:function(err){
   	            console.log('异常');
   	          }
   	        });
   });
     
     function loadWx(){
   	  wx.config({
   		    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
   		    appId: 'wxb3b7beee9190b2ef', // 必填，公众号的唯一标识wxd894029b9bdb4b67
   		    timestamp: timestamp, // 必填，生成签名的时间戳
   		    nonceStr: nonce, // 必填，生成签名的随机串
   		    signature: signature,// 必填，签名
   		    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ'] // 必填，需要使用的JS接口列表
   		});
   	  wx.ready(function(){
   		  //新版本，还没支持
//    		  wx.updateAppMessageShareData({ 
//    		        title: title, // 分享标题
//    		        desc: desc, // 分享描述
//    		        link: sharLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//    		        imgUrl: imgUrl, // 分享图标
//    		}, function(res) { 
   			
//    		这里是回调函数 
//    		}); 
   		  
//    		  wx.updateTimelineShareData({ 
//    		        title: title, // 分享标题
//    		        link: sharLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//    		        imgUrl: imgUrl, // 分享图标
//    		}, function(res) { 
//    			alert(res);
//    		这里是回调函数 
//    		}); 
   		  //分享到朋友圈
   		  wx.onMenuShareTimeline({
   			    title: title, // 分享标题
   			    link: sharLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
   			    imgUrl: imgUrl, // 分享图标
   			    desc: desc, // 分享描述
   			    success: function () {
   			    // 用户确认分享后执行的回调函数
   				},
   			cancel: function () {
   			    // 用户取消分享后执行的回调函数
   		    }
   		});
   		  //分享到朋友
   		  wx.onMenuShareAppMessage({
   			  title: title, // 分享标题
   			  desc: desc, // 分享描述
   			  link: sharLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
   			  imgUrl: imgUrl, // 分享图标
   			  type: 'link', // 分享类型,music、video或link，不填默认为link
   			  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
   			  success: function () {
   			  // 用户确认分享后执行的回调函数
   			  },
   			  cancel: function () {
   			  // 用户取消分享后执行的回调函数
   			  }
   			  });
   		  //分享到QQ
   		  wx.onMenuShareQQ({
   			  title: title, // 分享标题
   			  desc: desc, // 分享描述
   			  link: sharLink, // 分享链接
   			  imgUrl: imgUrl, // 分享图标
   			  success: function () {
   			  // 用户确认分享后执行的回调函数
   			  },
   			  cancel: function () {
   			  // 用户取消分享后执行的回调函数
   			  }
   			  });
   	  });
   	  
   	  wx.error(function(res){
   		
   	  });
   	  
   }
</script>
<body>
	
		<div class="content" id="content" >
			正在加载...
		</div>
	
	<div id="signBtnDiv" style="bottom: 5px;width: 100%; height: 35px; position: fixed; text-align: center; display: none;" >
		<input type="submit" id="signBtn" value="签名" style="width: 100px; height: 35px; font-size: 16px;">
<!-- 		<input type="submit" id="phoneBtn" onclick="openWrap()" value="选择时间" style="width: 100px; height: 35px; font-size: 16px;"> -->
		<input type="submit" id="submitBtn" onclick="doEdit()" value="提交" style="width: 100px; height: 35px; font-size: 16px;">
	</div>
		
	<div id="signWrap" style="color: #000;background: rgba(0,0,0,0.5);width: 100%;height: 100%;display: none;top: 0; position: fixed;">
		<span onclick="closeSign()" style="color: white;font-size: 24px;padding: 5px 10px;float: right;">X</span>
		<div style="bottom: 50px;width: 100%; height: 35px; position: fixed; text-align: center;" >
			<input type="submit" onclick="saveSign()" value="确定" style="width: 100px; height: 35px; font-size: 16px;">&nbsp;&nbsp;&nbsp;
			<input type="submit" onclick="resetSign()" value="重置" style="width: 100px; height: 35px; font-size: 16px;">
		</div>
	</div>
	
<!-- 	<div id="phoneWrap" style="color: black;background: rgba(0,0,0,0.8);width: 100%;height: 100%;display: none;top: 0; position: fixed;"> -->
<!-- 		<span onclick="closeWrap()" style="color: white;font-size: 24px;padding: 5px 10px;float: right;">X</span> -->
<!-- 		<div style="bottom: 150px;width: 100%; height: 35px; position: fixed; text-align: center;" > -->
<!-- 			<span style="color: white;">签约时间:</span><input type="date" id="signDate" placeholder="请选择"  style="height: 25px;" /><br/><br/> -->
<!-- 			<span style="color: white;">手机号码:</span><input type="number" id="signPhone" placeholder="请输入" style="height: 25px;" /> -->
<!-- 		</div> -->
<!-- 		<div style="bottom: 50px;width: 100%; height: 35px; position: fixed; text-align: center;" > -->
<!-- 			<input type="submit" onclick="savePhone()" value="确定" style="width: 100px; height: 35px; font-size: 16px;">&nbsp;&nbsp;&nbsp; -->
<!-- 		</div> -->
<!-- 	</div> -->
	

<script type="text/javascript" src="./js/jSignature-master/flashcanvas.js"></script>
<script src="./js/jSignature-master/jSignature.min.js"></script>
<script type="text/javascript">
var agreementId = $.getUrlParam("agreementId");
var agreementType = $.getUrlParam("agreementType");
var options = {
		defaultAction: 'drawIt',
		height:'100%',
		width:'100%',
		color:"#000",	//笔记颜色
		lineWidth: 1,			//笔宽
		'decor-color': '#fff'  //下划线颜色
		}
var $signature;
		
$(function() {

	initData( agreementId, function(ret){
		if(ret.status=='0'){
			$("#signBtnDiv").show();
			$("#signBtn").on("click",function(){
				initSign();
			});
		}else{
			$("#signBtnDiv").remove();
			$("#signWrap").remove();
		}
	});
	
	
	
});

//初始化合同详情
function initData(agreementId, callback){
	$.ajax({
		url : "./agreement/getById.do",
		data : {
			agreementId : agreementId,
		},
		type : "POST",
		dataType : 'json',
		cache : false,
		success : function(ret){
			if(ret){
				$("#content").html( (tranNull(ret.agreementContent)||"暂无数据") );
				if( callback && typeof callback == 'function' ){
					callback(ret);
				}
			}
		}
	});
}


// 初始化画板
function initSign(){
	$('#signWrap').show();
	$("#signBtnDiv").hide();
	$signature = $("#signWrap").jSignature('init',options); 
	$("#signImg").after("________").remove();
}
// 重置画板
function resetSign(){
	$signature.jSignature('reset');
}
//关闭画板
function closeSign(){
	resetSign();                
    $('#signWrap').hide();
	$("#signBtnDiv").show();
}

//保存签名
function saveSign(){
	 $('#signWrap').hide();
	 $("#signBtnDiv").show();
	
	var signTag = getSignTag();
	var top = $(signTag).position().top*100/$("#content").innerHeight();
	var left = $(signTag).position().left*100/$("#content").innerWidth();
	console.log(top,left)
	//获取数据 转换成图片
	 var data = $signature.jSignature('getData', 'default');
	 var img = new Image();
	 img.src = data;

	 var html = $(signTag).html();
	 console.log(html);
	 if(agreementType=="1"){	//业主
		 html = html.replace(/甲方签名[:\s\S]_*/g, '甲方签名:<img  id="signImg"  src="'+img.src+'" style="width:100px; height:100px;" />');
	 }else{	//租客
		 html = html.replace(/乙方签名[:\s\S]_*/g, '乙方签名:<img  id="signImg"  src="'+img.src+'" style="width:100px; height:100px;" />');
	 }
	 $(signTag).html( html );
}


function openWrap(span){    
	$('#phoneWrap').show();
	$("#signBtnDiv").hide();
}
function closeWrap(){    
    $("#phoneWrap").hide();
	$("#signBtnDiv").show();
}
function savePhone(){
	var signDate = $("#signDate").val();
	var signPhone = $("#signPhone").val();
	if(!signDate){
		bootstrap.alert("请选择时间");
		return;
	}
	if(!signPhone){
		bootstrap.alert("请输入电话");
		return;
	}
	var signTag = getSignTag();
	var html = $(signTag).html();
	console.log(html);
	html = html.replace(/签约时间[:\s\S][0-9_\s]*年[0-9_\s]*月[0-9_\s]*日/g, '签约时间: '+ signDate.split("-")[0] +' 年 '+ signDate.split("-")[1] +' 月 '+ signDate.split("-")[2] +' 日' );
	html = html.replace(/电[\s\S]*话[:\s\S][_0-9]*/g, '电    话:'+signPhone );
	$(signTag).html( html );
	closeWrap();
}


//保存合同信息
function doEdit(){ 	
	var content = $("#content").html();
	var index = bootstrap.loading("保存中...");
 	$.ajax({
		url : "./agreement/signName.do",
		data : {
			agreementId : agreementId,
			agreementContent : content,
			status : 1,
			houseStatus: 2
		},
		type : "POST",
		dataType : 'json',
		cache : false,
		success : function(ret) {
			bootstrap.close(index);
			if (ret.resultCode == 0) {
				//$.messager.popup(ret.msg);
				bootstrap.alert("签约成功", function(){
					history.go(-1);	
				});
				console.log("11111");
			}else{
				//$.messager.popup(ret.msg);
				bootstrap.alert("签约失败");
			}
		},
		error: function(){
			bootstrap.close(index);
		}
	}); 
}


function getSignTag(){
	if(agreementType=="1"){	//业主
		var reg = new RegExp("甲方签名");
	}else{
		var reg = new RegExp("乙方签名");
	}
	var tagP ;
	$("#content p").each(function(i,p){
		var text = $(p).text();
		if( reg.test(text) ){
			tagP = p;
			return;
	    }
	});
	return tagP;
}


</script>
</body>
</html>
